<template>
  <div style="display: flex;justify-content: space-evenly">
    <div class="main-body" style="display: block;height: 600px">
      <div style="display: flex;justify-content: start; padding: 20px;padding-left: 0px">
        <div style=" font-size: 20px">
          新建工单
        </div>
      </div>
      <div>
        <div class="HeaderInput">
          <el-input  class="searchBar" v-model='issueTitle' placeholder="标题"></el-input>
        </div>
        <div class="editor">
          <div style="border: 1px solid #ccc; margin-top: 10px">
            <Toolbar
                :editor="editorRef"
                :defaultConfig="toolbarConfig"
                :mode="mode"
                style="border-bottom: 1px solid #ccc"
            />
            <Editor
                :defaultConfig="editorConfig"
                :mode="mode"
                v-model="valueHtml"
                style="height: 300px; overflow-y: hidden"
                @onCreated="handleCreated"
                @onDestroyed="handleDestroyed"
                @onFocus="handleFocus"
                @onBlur="handleBlur"
            />
          </div>
        </div>
        <div class="confirm" style="display: flex;justify-content: center;padding: 20px">
          <el-button @click="createIssue">确认</el-button>
          <el-button @click="cancleIssue">取消</el-button>
        </div>
      </div>

    </div>
  </div>

</template>

<script>
import '@wangeditor/editor/dist/css/style.css';
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import request from "@/utils/request";
export default {

  data(){
    return{
      repoName:'',
      userId:'',
      content:'',
      issueTitle:'',
    }
  },
  components: { Editor, Toolbar },
  setup() {
    // 编辑器实例，必须用 shallowRef，重要！
    const editorRef = shallowRef();

    // 内容 HTML
    const valueHtml = ref('');

    // 模拟 ajax 异步获取内容
    onMounted(() => {

    });

    const toolbarConfig = {};
    const editorConfig = { placeholder: '请输入内容...' };

    // 组件销毁时，也及时销毁编辑器，重要！
    onBeforeUnmount(() => {
      const editor = editorRef.value;
      if (editor == null) return;

      editor.destroy();
    });

    // 编辑器回调函数
    const handleCreated = (editor) => {
      console.log('created', editor);
      editorRef.value = editor; // 记录 editor 实例，重要！
    };

    const handleFocus = (editor) => {
      console.log('focus', editor);
    };
    const handleBlur = (editor) => {
      console.log('blur', editor);
    };
    const customPaste = (editor, event, callback) => {
      console.log('ClipboardEvent 粘贴事件对象', event);

      // 自定义插入内容
      editor.insertText('xxx');

      // 返回值（注意，vue 事件的返回值，不能用 return）
      callback(false); // 返回 false ，阻止默认粘贴行为
      // callback(true) // 返回 true ，继续默认的粘贴行为
    };

    const printHtml = () => {
      const editor = editorRef.value;
      if (editor == null) return;
      return editor.getHtml();
    };

    const disable = () => {
      const editor = editorRef.value;
      if (editor == null) return;

    };

    return {
      editorRef,
      mode: 'default',
      valueHtml,
      toolbarConfig,
      editorConfig,
      handleCreated,
      handleFocus,
      handleBlur,
      customPaste,
      printHtml,
      disable
    };
  },
  created(){
    this.repoName=this.$route.params.repoName
    this.userId=sessionStorage.getItem("userId")
    console.log(this.repoId)
  },
  methods:{
    createIssue(){
      if(this.issueTitle==null){
        this.$notify({
          title: '错误',
          message: '标题不可为空',
          type: 'error',}
        )
        return
      }
      this.content=this.printHtml()
      console.log(this.content)
      request.post("/repo/create_issue",  {"repoName":this.repoName,"posterId":this.userId,"issueTitle":this.issueTitle,"issueContent":this.content}).then(res => {
        if (res.code === 200) {
          this.$notify({
            title: '成功',
            message: '创建工单成功',
            type: 'success',
          })
          this.$router.push("../tree/master")
        }
        else {
          this.$notify({
            title: '错误',
            message: res.msg,
            type: 'error',
          })
        }
      })
    },
    cancleIssue(){
      this.$router.push("../tree/master")
    },
  }
};
</script>

<style>
.main-body{
  width: 1000px;
}
</style>
